<script lang="ts" setup="">
import MyChart from '@/components/eCharts/myChart.vue'
import ChinaChart from '@/components/eCharts/chinaChart.vue'

const option1 = {
		title: {
			text: 'Stacked Area Chart',
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985',
				},
			},
		},
		legend: {
			data: [
				'Email',
				'Union Ads',
				'Video Ads',
				'Direct',
				'Search Engine',
			],
		},
		toolbox: {
			feature: {
				saveAsImage: {},
			},
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			},
		],
		yAxis: [
			{
				type: 'value',
			},
		],
		series: [
			{
				name: 'Email',
				type: 'line',
				stack: 'Total',
				areaStyle: {},
				emphasis: {
					focus: 'series',
				},
				data: [120, 132, 101, 134, 90, 230, 210],
			},
			{
				name: 'Union Ads',
				type: 'line',
				stack: 'Total',
				areaStyle: {},
				emphasis: {
					focus: 'series',
				},
				data: [220, 182, 191, 234, 290, 330, 310],
			},
			{
				name: 'Video Ads',
				type: 'line',
				stack: 'Total',
				areaStyle: {},
				emphasis: {
					focus: 'series',
				},
				data: [150, 232, 201, 154, 190, 330, 410],
			},
			{
				name: 'Direct',
				type: 'line',
				stack: 'Total',
				areaStyle: {},
				emphasis: {
					focus: 'series',
				},
				data: [320, 332, 301, 334, 390, 330, 320],
			},
			{
				name: 'Search Engine',
				type: 'line',
				stack: 'Total',
				label: {
					show: true,
					position: 'top',
				},
				areaStyle: {},
				emphasis: {
					focus: 'series',
				},
				data: [820, 932, 901, 934, 1290, 1330, 1320],
			},
		],
	},
	option2 = {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		},
		yAxis: {
			type: 'value',
		},
		series: [
			{
				data: [120, 200, 150, 80, 70, 110, 130],
				type: 'bar',
			},
		],
	},
	option3 = {
		dataset: [
			{
				source: [
					['Product', 'Sales', 'Price', 'Year'],
					['Cake', 123, 32, 2011],
					['Cereal', 231, 14, 2011],
					['Tofu', 235, 5, 2011],
					['Dumpling', 341, 25, 2011],
					['Biscuit', 122, 29, 2011],
					['Cake', 143, 30, 2012],
					['Cereal', 201, 19, 2012],
					['Tofu', 255, 7, 2012],
					['Dumpling', 241, 27, 2012],
					['Biscuit', 102, 34, 2012],
					['Cake', 153, 28, 2013],
					['Cereal', 181, 21, 2013],
					['Tofu', 395, 4, 2013],
					['Dumpling', 281, 31, 2013],
					['Biscuit', 92, 39, 2013],
					['Cake', 223, 29, 2014],
					['Cereal', 211, 17, 2014],
					['Tofu', 345, 3, 2014],
					['Dumpling', 211, 35, 2014],
					['Biscuit', 72, 24, 2014],
				],
			},
			{
				transform: {
					type: 'filter',
					config: { dimension: 'Year', value: 2011 },
				},
			},
			{
				transform: {
					type: 'filter',
					config: { dimension: 'Year', value: 2012 },
				},
			},
			{
				transform: {
					type: 'filter',
					config: { dimension: 'Year', value: 2013 },
				},
			},
		],
		series: [
			{
				type: 'pie',
				radius: 50,
				center: ['50%', '25%'],
				datasetIndex: 1,
			},
			{
				type: 'pie',
				radius: 50,
				center: ['50%', '50%'],
				datasetIndex: 2,
			},
			{
				type: 'pie',
				radius: 50,
				center: ['50%', '75%'],
				datasetIndex: 3,
			},
		],
		// Optional. Only for responsive layout:
		media: [
			{
				query: { minAspectRatio: 1 },
				option: {
					series: [
						{ center: ['25%', '50%'] },
						{ center: ['50%', '50%'] },
						{ center: ['75%', '50%'] },
					],
				},
			},
			{
				option: {
					series: [
						{ center: ['50%', '25%'] },
						{ center: ['50%', '50%'] },
						{ center: ['50%', '75%'] },
					],
				},
			},
		],
	},
	option4 = {
		xAxis: {},
		yAxis: {},
		series: [
			{
				symbolSize: 20,
				data: [
					[10.0, 8.04],
					[8.07, 6.95],
					[13.0, 7.58],
					[9.05, 8.81],
					[11.0, 8.33],
					[14.0, 7.66],
					[13.4, 6.81],
					[10.0, 6.33],
					[14.0, 8.96],
					[12.5, 6.82],
					[9.15, 7.2],
					[11.5, 7.2],
					[3.03, 4.23],
					[12.2, 7.83],
					[2.02, 4.47],
					[1.05, 3.33],
					[4.05, 4.96],
					[6.03, 7.24],
					[12.0, 6.26],
					[12.0, 8.84],
					[7.08, 5.82],
					[5.02, 5.68],
				],
				type: 'scatter',
			},
		],
	}
</script>

<template>
	<div>
		<a-divider>基础图表</a-divider>
		<a-row :gutter="16">
			<a-col :span="12">
				<a-card hoverable>
					<MyChart width="750px" :prop="option1" />
				</a-card>
			</a-col>
			<a-col :span="12">
				<a-card hoverable>
					<MyChart width="750px" :prop="option2" />
				</a-card>
			</a-col>
		</a-row>
		<a-row class="mt-5" :gutter="16">
			<a-col :span="12">
				<a-card hoverable>
					<MyChart width="750px" :prop="option3" />
				</a-card>
			</a-col>
			<a-col :span="12">
				<a-card hoverable>
					<MyChart width="750px" :prop="option4" />
				</a-card>
			</a-col>
		</a-row>
		<a-divider>进阶图表</a-divider>
		<a-row class="mt-5">
			<a-card class="full-width" hoverable>
				<ChinaChart width="100%" />
			</a-card>
		</a-row>
	</div>
</template>
